<!--
 * @Descripttion: 网站入口-要素治理平台
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2025-06-06
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-06-12
-->
<script lang="ts" setup>
  import { ref } from 'vue'

  import { CommonImgEnum, DataGovernImgEnum } from '/@/enums/imageEnum'

  enum CardEnum {
    /** 全域数据集成汇聚 */
    INTEGRATE = 'integrate',
    /** 全域数据资产治理 */
    GOVERN = 'govern',
    /** 全生命周期安全管控 */
    SECURITY = 'security',
    /** 统一数据调度运维 */
    OPERATION = 'operation',
    /** 一站式敏捷数据开发 */
    DEVELOP = 'develop',
    /** 资产高效运营 */
    OPERATE = 'operate',
  }

  /** 卡片 */
  const card = ref('')

  /**
   * 选中卡片
   * @param cardType 卡片类型
   */
  const checkCard = (cardType: CardEnum) => (card.value = cardType)
</script>

<template>
  <div class="data-govern">
    <img class="bg" :src="DataGovernImgEnum.bg" />
    <img class="zeus" :src="DataGovernImgEnum.zeus" />
    <div class="info">
      <div class="info-title">要素治理平台</div>
      <div class="info-desc">要素治理平台为企业提供全域数据集成、标准管理、加工治理、数据服务等能力，一站式构建标准统一、质量可靠、安全稳定、消费便捷的数据体系。以资产整合与价值激活为核心，将治理后的数据转化为可复用的数据服务，通过智能算法挖掘数据潜能，助力企业实现数据资源向资产的价值跃升。</div>
      <div class="info-try">
        <span class="info-try-text">前往试用</span>
        <img class="info-try-arrow" :src="CommonImgEnum.searchArrow" />
      </div>
    </div>
    <div class="card">
      <div class="card-item integrate" :class="{ active: card === CardEnum.INTEGRATE }" @click="checkCard(CardEnum.INTEGRATE)">
        <div class="card-item-title">全域数据集成汇聚</div>
        <div class="card-item-content">
          <div class="text">支持50多种数据源类型。</div>
          <div class="text">可视化拖拽模式。</div>
          <div class="text">限速容错等精细化控制。</div>
        </div>
      </div>
      <div class="card-item govern" :class="{ active: card === CardEnum.GOVERN }" @click="checkCard(CardEnum.GOVERN)">
        <div class="card-item-title">全域数据资产治理</div>
        <div class="card-item-content">
          <div class="text">数据标准统一定义。</div>
          <div class="text">内置200+行业数据标准模板，支持动态质量校验和质量评分机制。</div>
          <div class="text">实时质检规则库（如完整性、一致性校验）降低数据错误率60%以上。</div>
        </div>
      </div>
      <div class="card-item security" :class="{ active: card === CardEnum.SECURITY }" @click="checkCard(CardEnum.SECURITY)">
        <div class="card-item-title">全生命周期安全管控</div>
        <div class="card-item-content">
          <div class="text nowrap">基于国标行标，通过敏感度分类分级。</div>
          <div class="text">采用静态脱敏（替换/删除）与动态加密（HL7+SM4/SM2国密动态脱敏）。</div>
          <div class="text">基于RBAC/ABAC模型实现字段级细粒度权限管理。</div>
        </div>
      </div>
      <div class="card-item operation" :class="{ active: card === CardEnum.OPERATION }" @click="checkCard(CardEnum.OPERATION)">
        <div class="card-item-title">统一数据调度运维</div>
        <div class="card-item-content">
          <div class="text">统一资源池,降低碎片。</div>
          <div class="text">存算分离架构，资源独立横向扩展。</div>
          <div class="text">端边云一体，优化资源调配。</div>
        </div>
      </div>
      <div class="card-item develop" :class="{ active: card === CardEnum.DEVELOP }" @click="checkCard(CardEnum.DEVELOP)">
        <div class="card-item-title">一站式敏捷数据开发</div>
        <div class="card-item-content">
          <div class="text">提供可视化的图形开发界面，支持丰富的作业算子</div>
          <div class="text">存支持每日千万级调度稳定运行。</div>
          <div class="text">高性能计算引擎，支持PB级数据的离线分析与秒级实时计算。</div>
        </div>
      </div>
      <div class="card-item operate" :class="{ active: card === CardEnum.OPERATE }" @click="checkCard(CardEnum.OPERATE)">
        <div class="card-item-title">资产高效运营</div>
        <div class="card-item-content">
          <div class="text">全企业数据资产盘点与展示。</div>
          <div class="text">智能查找数据资产。</div>
          <div class="text">建立字段级血缘追溯能力。</div>
          <div class="text">快捷调用数据API。</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .data-govern {
    position: relative;
    margin-top: -60px;

    .bg {
      width: 100%;
    }

    .zeus {
      position: absolute;
      z-index: 1;
      top: 80px;
      right: 0;
      width: 1492px;
    }

    .info {
      position: absolute;
      z-index: 2;
      top: 220px;
      left: 80px;

      .info-title {
        display: inline-block;
        height: 60px;
        line-height: 60px;
        font-size: 60px;
        font-weight: 700;
        color: transparent;
        background-image: linear-gradient(270deg, #3bcafc 0%, #2369f3 100%);
        background-clip: text;
      }

      .info-desc {
        width: 720px;
        margin-top: 32px;
        height: 104px;
        text-align: justified;
        line-height: 26px;
        font-size: 18px;
        color: #000;
      }

      .info-try {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 154px;
        height: 55px;
        margin-top: 32px;
        border-radius: 30px;
        background: linear-gradient(270deg, #39bffc 0%, #246af3 94.05%);
        cursor: pointer;

        .info-try-text {
          width: 72px;
          font-size: 18px;
          font-weight: 500;
          color: #fff;
        }

        .info-try-arrow {
          width: 22px;
          height: 22px;
          margin-left: 8px;
        }
      }
    }

    .card {
      position: absolute;
      z-index: 2;
      bottom: 40px;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;

      .card-item {
        width: 290px;
        height: 252px;
        padding: 20px;
        border: 1px solid #fff;
        border-radius: 8px;
        backdrop-filter: blur(10px);
        background: rgb(255 255 255 / 80%);
        cursor: pointer;

        .card-item-title {
          height: 28px;
          line-height: 28px;
          font-size: 20px;
          font-weight: 600;
          color: #1d2129;
        }

        .card-item-content {
          margin-top: 20px;

          .text {
            margin-top: 16px;
            padding-left: 24px;
            line-height: 22px;
            font-size: 14px;
            color: #4e5969;
            background: url('/@/assets/images/views/main/data-govern/check.png') no-repeat left 4px;
            background-size: 16px 16px;

            &:first-child {
              margin-top: 0;
            }

            &.nowrap {
              white-space: nowrap;
            }
          }
        }

        &.active {
          border: 1px solid #165dff;
          box-shadow: 0 4px 8px rgb(18 69 185 / 15%);

          .card-item-content {
            .text {
              color: #1d2129;
            }
          }
        }
      }
    }
  }
</style>
